import { ref, watch } from 'vue'

export default function useDrawer(props: { visible: boolean }, emit: Function) {
  const selfVisible = ref(props.visible)
  const spinShow = ref(false)

  watch(
    () => props.visible,
    () => {
      if (selfVisible.value !== props.visible) {
        selfVisible.value = props.visible
      }
    }
  )

  const handleChange = (val: boolean, emitClose = true) => {
    if (val !== props.visible) {
      emit('update:visible', val)
    }
    if (!val && emitClose) {
      emit('close', val)
    }
  }

  return {
    selfVisible,
    spinShow,
    handleChange
  }
}
